<template>
    <div class="m-product-categroy">
        <dl class="classic">
            <dt>分类</dt>
            <dt>全部</dt>
            <dd v-for="(item,index) of types" :key="index">
                <iselect
                    :name="item.type"
                    :list="item.module"
                />
            </dd>
        </dl>
        <dl class="classic">
            <dt @click="Click">区域</dt>
            <dt>全部</dt>
            <dd v-for="(item,index) of areas" :key="index">
                <iselect
                    :name="item.type"
                    :list="item.module"
                />
            </dd>
        </dl>
    </div>
</template>

<script>
import Iselect from './iselect'
export default {
    props: {
        types: {
            type: Array,
            default() {
                return []
            }
        },
        areas: {
            type: Array,
            default() {
                return []
            }
        }
    },
    components: {
        Iselect
    },
    methods: {
        Click() {
            console.log(this.areas,this.types)
        }
    }
}
</script>

<style lang="scss">
    .m-product-categroy {
        padding: 15px 20px 0;
        background: #FFF;
        border: 1px solid #E5E5E5;
        border-radius: 4px;
        color: #333;
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        .classic {
            display: flex;
            flex-direction: row;
            padding-bottom: 10px;
            >dt {
                width: 80px;
                &:nth-child(2) {
                    width: 48px;
                    height: 22px;
                    background: #13D1BE;
                    border-radius: 100px;
                    color: #fff;
                    line-height: 22px;
                    text-align: center;
                    margin-right: 40px;
                    box-sizing: border-box;
                }
            }
            &:nth-child(1) {
                dd {
                    border-bottom: 1px solid #ddd
                }
            }
        }
    }





    // .m-product-categroy {
    //   padding: 15px 20px 0;
    //   background: #FFF;
    //   border: 1px solid #E5E5E5;
    //   border-radius: 4px;
    //   color: #333;
    //   font-size: 14px;
    //   font-weight: 500;
    //   line-height: 20px;
    // }

    // .classic {
    //   display: flex;
    //   padding-bottom: 10px;

    //   >dt {
    //     width: 80px;

    //     &:nth-child(2) {
    //       border-radius: 100px;
    //       background: #13D1BE;
    //       color: #FFF;
    //       height: 22px;
    //       line-height: 22px;
    //       width: 40px;
    //       box-sizing: border-box;
    //       margin-right: 40px;
    //       text-align: center;
    //     }
    //   }

    //   &:nth-child(1) {
    //     dd {
    //       border-bottom: 1px solid #ddd;
    //     }
    //   }
    // }
</style>


